<template>
    <div class="node">
      <div class="upper">
        <div class="connParent" v-if="!isFirstNode">
          <div class="lineV"></div>
          <div class="lineH"></div>
        </div>
        <div class="cntnrTtlBtnsCrclConn">
          <div class="cntnrTtl">
            <input class="ttl" type="text" v-model="node.title" />
          </div>
          <div class="btns">
            <div class="icon iconPlusSign" @click="addSubseqNode"></div>
            <div class="icon iconMinusSign" @click="removeNode"></div>
            <div class="icon iconArrowheadL" @click="moveBackward"></div>
            <div class="icon iconArrowheadR" @click="moveForward"></div>
            <div class="icon iconArrowheadU" @click="moveSubnodesBackward"></div>
            <div class="icon iconArrowheadD" @click="moveSubnodesForward"></div>
            <label class="icon iconMenu" @click="toggleMenu">
              <input class="chkMenu" type="checkbox" v-model="node.menuChecked" />
            </label>
            <div class="icon iconLShapeAdd" @click="addSubnodes"></div>
          </div>
          <div class="cntnrCrclConn">
            <label class="crcl" @click="toggleCrcl">
              <input class="chkCrcl" type="checkbox" v-model="node.crclChecked" />
            </label>
            <div class="connNext" v-if="!isLastNode">
              <div class="arrowLine"></div>
              <div class="arrowhead"></div>
            </div>
            <label class="dot" @click="toggleSubnodes">
              <input class="chkSubnodes" type="checkbox" v-model="node.subnodesChecked" />
            </label>
          </div>
        </div>
      </div>
      <div class="lower" v-if="node.menuChecked">
        <div class="menu">
          <Item v-for="(item, index) in node.items" :key="index" :item="item" @add-item="addItem" @remove-item="removeItem" @move-item-backward="moveItemBackward" @move-item-forward="moveItemForward" />
        </div>
      </div>
      <Subnodes v-if="node.subnodesChecked" :subnodes="node.subnodes" @add-subnodes="addSubnodes" @add-subseq-node="addSubseqNode" @remove-node="removeNode" @move-backward="moveBackward" @move-forward="moveForward" @move-subnodes-backward="moveSubnodesBackward" @move-subnodes-forward="moveSubnodesForward" />
    </div>
  </template>
  
  <script>
  import Subnodes from './Subnodes.vue';
  import Item from './Item.vue';
  
  export default {
    components: {
      Subnodes,
      Item
    },
    props: {
      node: Object
    },
    computed: {
      isFirstNode() {
        return this.$parent.nodes[0] === this.node;
      },
      isLastNode() {
        return this.$parent.nodes[this.$parent.nodes.length - 1] === this.node;
      }
    },
    methods: {
      addSubnodes() {
        this.$emit('add-subnodes', this.node);
      },
      addSubseqNode() {
        this.$emit('add-subseq-node', this.node);
      },
      removeNode() {
        this.$emit('remove-node', this.node);
      },
      moveBackward() {
        this.$emit('move-backward', this.node);
      },
      moveForward() {
        this.$emit('move-forward', this.node);
      },
      moveSubnodesBackward() {
        this.$emit('move-subnodes-backward', this.node);
      },
      moveSubnodesForward() {
        this.$emit('move-subnodes-forward', this.node);
      },
      toggleMenu() {
        this.node.menuChecked = !this.node.menuChecked;
      },
      toggleCrcl() {
        this.node.crclChecked = !this.node.crclChecked;
      },
      toggleSubnodes() {
        this.node.subnodesChecked = !this.node.subnodesChecked;
      },
      addItem(item) {
        this.node.items.push({ name: 'Item' });
      },
      removeItem(item) {
        const index = this.node.items.indexOf(item);
        if (this.node.items.length > 1) {
          this.node.items.splice(index, 1);
        }
      },
      moveItemBackward(item) {
        const index = this.node.items.indexOf(item);
        if (index > 0) {
          this.node.items.splice(index - 1, 0, this.node.items.splice(index, 1)[0]);
        }
      },
      moveItemForward(item) {
        const index = this.node.items.indexOf(item);
        if (index < this.node.items.length - 1) {
          this.node.items.splice(index + 1, 0, this.node.items.splice(index, 1)[0]);
        }
      }
    }
  };
  </script>
  
  <style scoped>
  /* 组件特定样式 */
  </style>